<template>
  <Main :type="'form'">
    <Title :title="pageName" />

    <el-form
      ref="form"
      label-width="130px"
      label-position="right"
      :model="form"
    >
      <el-form-item
        label="活动期数"
        prop="titleTime"
        :rules="{ required: true, message: '请输入活动期数', trigger: 'blur' }"
      >
        <!-- <el-input-number v-model="form.titleTime" :precision="0" :step="1" :min="1" :controls='false'></el-input-number> -->
        <el-input
          v-model="form.titleTime"
          class="form-input"
          placeholder="请输入活动名称"
          size="medium"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="活动名称"
        prop="title"
        :rules="{ required: true, message: '请输入活动名称', trigger: 'blur' }"
      >
        <el-input
          v-model="form.title"
          class="form-input"
          placeholder="请输入活动名称"
          size="medium"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="参与方式"
        prop="status"
        :rules="{ required: true, message: '请输入参与方式', trigger: 'blur' }"
      >
        <el-radio v-model="form.status" disabled label="0">免费</el-radio>
      </el-form-item>
      <el-form-item
        label="选择奖品"
        prop="prizeId"
        :rules="{ required: true, message: '请选择奖品', trigger: 'blur' }"
      >
        <span>{{ form.prizeName }}</span>
        &nbsp;&nbsp;&nbsp;
        <el-button type="primary" @click="dialogTableVisible = true"
          >去选择</el-button
        >
      </el-form-item>
      <el-form-item
        label="活动时间"
        prop="time"
        :rules="{ required: true, message: '请输入活动时间', trigger: 'blur' }"
      >
        <el-date-picker
          v-model="form.time"
          type="datetimerange"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label="中奖方式"
        prop="isWay"
        :rules="{ required: true, message: '请输入中奖方式', trigger: 'blur' }"
      >
        <el-radio v-model="form.isWay" disabled label="0">系统计算</el-radio>
      </el-form-item>
      <el-form-item
        label="奖品名额"
        prop="prizeNumber"
        :rules="{ required: true, message: '请输入奖品名额', trigger: 'blur' }"
      >
        <el-input-number
          v-model="form.prizeNumber"
          :precision="0"
          :step="1"
          :min="1"
          :max="form.prizeNum"
          :controls="false"
          size="medium"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="兑奖有效日期">
        <el-input-number
          v-model="form.effectiveData"
          :precision="0"
          :step="1"
          :min="1"
          :controls="false"
          size="medium"
        ></el-input-number>
        天
        <span class="add-info"
          >中奖后N天内为有效兑奖时间，超过时间则失效，不设置则永久有效</span
        >
      </el-form-item>
      <el-form-item
        label="活动规则"
        prop="content"
        :rules="{ required: true, message: '请输入活动规则', trigger: 'blur' }"
      >
        <el-input
          v-model="form.content"
          style="width:60%;"
          type="textarea"
          :autosize="{ minRows: 8, maxRows: 12 }"
          placeholder="请输入内容"
          maxlength="200"
          show-word-limit
          size="medium"
        >
        </el-input>
      </el-form-item>
    </el-form>

    <Footer>
      <el-button type="primary" @click="submit">保 存</el-button>
      <el-button plain @click="$emit('out')">取 消</el-button>
      <el-button
        v-if="pageName == '编辑零元抽奖'"
        plain
        @click="dialogVisibleFX = true"
        >分享设置</el-button
      >
    </Footer>

    <el-dialog title="分享设置" :visible.sync="dialogVisibleFX" width="40%">
      <el-form ref="formFX" :model="formFX" label-width="100px">
        <el-form-item
          label="分享图标"
          prop="file"
          :rules="{
            required: true,
            message: '请输入活动名称',
            trigger: 'blur'
          }"
        >
          <div class="commodityImage">
            <div class="icon">
              <div>
                <img
                  v-if="formFX.file"
                  :src="
                    $store.state.qiniu + formFX.file + $store.state.imgRotate
                  "
                />
              </div>
            </div>
            <el-button type="primary" @click="showImages = true"
              >选择图片</el-button
            >
          </div>
        </el-form-item>
        <el-form-item
          label="分享标题"
          prop="title"
          :rules="{
            required: true,
            message: '请输入活动名称',
            trigger: 'blur'
          }"
        >
          <el-input
            v-model="formFX.title"
            style="line-height: 20px;"
            maxlength="25"
            show-word-limit
            size="medium"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="分享描述"
          prop="content"
          :rules="{
            required: true,
            message: '请输入活动名称',
            trigger: 'blur'
          }"
        >
          <el-input
            v-model="formFX.content"
            type="textarea"
            :autosize="{ minRows: 8, maxRows: 12 }"
            maxlength="40"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click.stop="submitFX">确 定</el-button>
        <el-button @click="$emit('out')">取 消</el-button>
      </span>
    </el-dialog>
    <images
      :dialog-images="showImages"
      :use-btn="true"
      :use-type="'img'"
      @close="close"
    />
    <el-dialog title="选择奖品" :visible.sync="dialogTableVisible">
      <div class="diah">
        <p>奖品名称</p>
        <el-input
          v-model="search"
          class="add-min-input"
          size="small"
          placeholder="请输入名称"
        ></el-input>
        &nbsp;&nbsp;
        <el-button size="mini" type="primary" @click="getList">搜索</el-button>
        <el-button size="mini" @click="reset">重置</el-button>
      </div>

      <Table :data="listData">
        <el-table-column align="center" width="55">
          <template slot-scope="scope">
            <el-radio
              v-model="scope.row.radio"
              :label="1"
              @change="radioTag(scope.row.prize_id)"
            >
              <span style="display:none">dsd</span>
            </el-radio>
          </template>
        </el-table-column>
        <el-table-column
          property="goods.goods_name"
          label="奖品名称"
          align="center"
        ></el-table-column>
        <el-table-column label="奖品图片" align="center">
          <template slot-scope="scope">
            <img
              :src="
                $store.state.qiniu +
                  scope.row.sku.cover +
                  $store.state.imgRotate
              "
              width="80px"
              height="80px"
            />
          </template>
        </el-table-column>
        <el-table-column
          property="money"
          label="奖品价值"
          align="center"
        ></el-table-column>
        <el-table-column
          property="sku.sku_stock"
          label="奖品库存"
          align="center"
        ></el-table-column>
      </Table>
      <el-pagination
        class="foot-operation-pagination"
        style="text-align: center;"
        :page-size="10"
        layout="prev, pager, next"
        :total="totals"
        @current-change="changes"
      >
      </el-pagination>
      <div slot="footer">
        <el-button type="primary" @click="submitJP">确 定</el-button>
        <el-button @click="dialogTableVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </Main>
</template>
<script>
import { SETPRIZEACTIVITY, PRIZEDEPOT } from "../service";
import { SETSHARE } from "@/service/shop";

export default {
  components: {
    images: r =>
      require.ensure([], () => r(require("publicCom/imgupdate")), "imgupdate")
  },
  props: {
    dataVal: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      pageName: "新建零元抽奖",
      dialogVisibleFX: false,
      dialogTableVisible: false,
      showImages: false,
      listData: [],
      form: {
        hotId: "",
        titleTime: "",
        title: "",
        time: [],
        prizeNumber: 1,
        effectiveData: "",
        prizeId: "",
        prizeName: "暂未选择奖品",
        prizeNum: 100000,
        content: "",
        status: "0",
        isWay: "0"
      },
      formFX: {
        title: "",
        content: "",
        file: ""
      },
      search: "",
      totals: 0,
      pages: 1
    };
  },
  created() {
    if (JSON.stringify(this.dataVal) !== "{}") {
      this.pageName = "编辑零元抽奖";
      this.form = {
        hotId: this.dataVal.hot_id,
        titleTime: this.dataVal.title_time,
        title: this.dataVal.title,
        time: [this.dataVal.stime, this.dataVal.etime],
        prizeNumber: this.dataVal.prize_number,
        effectiveData: this.dataVal.effective_data,
        prizeId: this.dataVal.prize_id,
        prizeName: this.dataVal.goods_name,
        prizeNum: this.dataVal.stock,
        content: this.dataVal.content,
        status: this.dataVal.status,
        isWay: this.dataVal.is_way
      };
    } else {
      this.pageName = "新建零元抽奖";
      this.statu = false;
    }
    this.getList();
  },

  methods: {
    async submit() {
      await this.$refs["form"].validate(valid => {
        if (valid) {
          SETPRIZEACTIVITY({
            hot_id: this.form.hotId,
            title_time: this.form.titleTime,
            title: this.form.title,
            prize_id: this.form.prizeId,
            stime: this.form.time[0],
            etime: this.form.time[1],
            prize_number: this.form.prizeNumber,
            content: this.form.content,
            effective_data: this.form.effectiveData,
            status: this.form.status,
            is_way: this.form.isWay
          }).then(({ code, data, msg }) => {
            if (code === 200) {
              if (this.pageName === "新建零元抽奖") {
                this.dialogVisibleFX = true;
                this.form.hotId = data;
              } else {
                this.$emit("out");
              }
            }
            this.$message({
              message: msg,
              type: code === 200 ? "success" : "error"
            });
          });
        }
      });
    },
    async submitFX() {
      await this.$refs["formFX"].validate(valid => {
        if (valid) {
          SETSHARE({
            type_id: this.form.hotId,
            type: 2,
            flag: "save",
            title: this.formFX.title,
            content: this.formFX.content,
            file: this.formFX.file
          }).then(({ code, msg }) => {
            if (code === 200) {
              this.dialogVisibleFX = false;
              this.$emit("out");
            }
            this.$message({
              message: msg,
              type: code === 200 ? "success" : "error"
            });
          });
        }
      });
    },
    submitJP() {
      this.dialogTableVisible = false;
      let v = this.listData.filter(f => {
        return f.radio === 1;
      });
      this.form.prizeId = v[0].prize_id;
      this.form.prizeName = v[0].goods.goods_name;
      this.form.prizeNum = v[0].sku.sku_stock;
    },
    close(file) {
      this.showImages = false;
      if (!file) return;
      this.formFX.file = file.file_path;
    },
    reset() {
      this.search = "";
      this.getList();
    },
    radioTag(id) {
      this.listData.forEach(ele => {
        if (ele.prize_id === id) {
          ele.radio = 1;
        } else {
          ele.radio = 2;
        }
      });
    },
    async getList() {
      await PRIZEDEPOT({
        goods_name: this.search,
        page: this.pages,
        pageshow: 10
      }).then(res => {
        let { code, data } = res;
        if (code === 200) {
          data.list.forEach(ele => {
            this.form.prizeId === ele.prize_id
              ? (ele.radio = 1)
              : (ele.radio = 2);
          });
          this.listData = data.list;
          this.totals = data.count;
        } else {
          this.listData = [];
        }
      });
      await SETSHARE({
        type_id: this.form.hotId,
        type: 2
      }).then(({ code, data }) => {
        if (code === 200) {
          this.formFX.title = data.title;
          this.formFX.content = data.content;
          this.formFX.file = data.img;
        }
      });
    },
    changes(page) {
      this.pages = page;
      this.getList();
    }
  }
};
</script>
<style lang="scss" scoped>
.commodityImage {
  .icon {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    display: block;
    float: left;
    margin-right: 10px;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
    }
  }
  input {
    float: left;
  }
}
.diah {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #f2f2f2;
  p {
    display: inline-block;
    font-size: 16px;
    padding: 0 12px;
    font-weight: bold;
  }
}
</style>
